
// 获得所有待轮播的内容
var itemLiArr = document.querySelectorAll(".item li");
// 记录当前索引
var index = 0;
// 分页导航
var pageDom = document.querySelector(".page");
var pageLiArr = document.querySelectorAll(".page li");
// 初始化事件，上一张，下一张
initEvent();
// 初始化页面导航，给导航添加属性索引
initPage();
// 初始化定时器
initTimer();
// =====
function initTimer() {
  // 加入定时器
  // var timer = setInterval(function(){
  //   onNext();
  // },2000)
  var timer = setInterval(onNext, 2000);

  // 鼠标划入，清除定时器
  document.querySelector(".box").onmouseenter = function () {
    clearInterval(timer);
  }
  // 鼠标离开，恢复定时器
  document.querySelector(".box").onmouseleave = function () {
    timer = setInterval(onNext, 2000);
  }
}
// 初始化页面导航
function initPage() {
  // 鼠标移入导航索引

  // onmouseenter没有事件冒泡
  // pageDom.onmouseenter=function(e){
  //   console.log(e.target);
  //   console.log(this);
  // }
  // 为所有的分页li，加上位置属性，方便后面获取索引

  pageLiArr.forEach((item, index) => {
    item.setAttribute("pos", index);
  })
}
// 初始化事件
function initEvent() {
  // 下一张
  // rightBtn.onclick=function(){
  //   onNext();
  // }
  rightBtn.onclick = onNext;
  // 上一张
  leftBtn.onclick = function () {
    // 不选择index所在的图片，下标
    noSelect(index);
    // 显示下个内容
    index--;
    // 判断是否超出索引
    if (index == -1) {
      // 超出索引，回到最后一个
      index = itemLiArr.length - 1;
    }
    // 选择index所在的图片，下标
    onSelect(index);
  }
  // 鼠标移入页面索引
  pageDom.onmouseover = function (e) {
    // 鼠标划过，没有进入li，忽略
    // 嵌套越少越好
    if (e.target.tagName != "LI") {
      return;
    }
    //保证进入了li
    // 获取li的pos属性
    var pos = e.target.getAttribute("pos");
    noSelect(index);
    // 显示目标内容
    index = pos;
    onSelect(index)
  }
}
// 下一张的逻辑
function onNext() {
  // 不选择index所在的图片，下标
  noSelect(index);
  // 显示下个内容
  index++;
  // 判断是否超出索引
  if (index == itemLiArr.length) {
    // 超出索引，回到第一个
    index = 0;
  }
  // 选择index所在的图片，下标
  onSelect(index);
}
// 不选择index所在的图片，下标
function noSelect(index) {
  // 隐藏当前内容
  animate(itemLiArr[index], { opacity: 0 });
  // 取消分页焦点
  pageLiArr[index].style.backgroundColor = "red";
}
// 选择index所在的图片，下标
function onSelect(index) {
  // 隐藏当前内容
  animate(itemLiArr[index], { opacity: 1 });
  // 取消分页焦点
  pageLiArr[index].style.backgroundColor = "white";
}